<template>
  <div class="devList-comp-ct c_page">
    <van-nav-bar :title="componentName" left-arrow @click-left="goback">
      <van-icon name="search" slot="right" />
    </van-nav-bar>
    <div class="c_container main_container">
      <div class="l_menu">
        <div
          class="menu_item"
          v-for="(item) in menuList"
          :key="item.dev_type"
          :class="{'active':cur_dev_type==item.dev_type}"
          @click="changeType(item.dev_type)"
        ><span>{{ item.name }}</span></div>
      </div>
      <div class="l_container" >
        <van-pull-refresh v-model="loading" @refresh="refreshList" >
          <div v-for="group in sbList" :key="group.dev_type">
            <div>
              <span>{{group.dev_type}}</span>
            </div>
            <div v-for="item in group.list" :key="item.ID" >
              {{item.ID}}
            </div>
          </div>
          
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast,Icon,NavBar  } from 'vant';
Vue.use(Toast).use(Icon).use(NavBar);
export default {
  name: 'devList',
  data() {
    return {
      componentName: '防护设备',
      loading:false,
      finished:false,
      unitId:-1,
      menuList: [
        { name: "人防门",dev_type:0 },
        { name: "预埋套管(战时)",dev_type:1 },
        { name: "预埋套管(平时)",dev_type:2 },
        { name: "通风设备",dev_type:3 },
        { name: "其他设备",dev_type:4 },
        { name: "密闭观察窗",dev_type:5 },
      ],
      cur_dev_type: 0,
      sbList:[]
    }
  },
  methods: {
    goback(){
      this.$router.back(-1);
    },
    refreshList(){
      for(let i=0;i<5;i++){
        let glist = {
          dev_type: i,
          list:[]
        }
        for(let j=0;j<3;j++){
          let item = {
            ID:i+'-'+j,
            DEVICE_TYPE_ID:'密封门',
            DEVICE_NAME:'钢筋混凝土单扇密闭门',
            GG:'设备规格',
            DEVICE_UNIT:'设备单位',
            NUM:'设备数量'
          }
          glist.list.push(item)
        }
        this.sbList.push(glist)
      }
      this.loading = false;
    },
    changeType(devtype){
       this.cur_dev_type = devtype
    }
  },
  mounted () {
    this.unitId = this.$route.params.unitId;
  },
  created () {
    this.refreshList()
  },
}
</script>
<style lang="scss" scoped>
.devList-comp-ct {
  
  .main_container {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    .l_menu {
      flex: 1;
      background-image: linear-gradient(rgb(100, 186, 230), rgb(18, 101, 209));
      .menu_item {
        // line-height: 50px;
        text-align: center;
        min-height: 50px;
        font-weight: bold;
        color: #fff;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content:center;
        span{
          white-space:pre;
        }
      }
      .active {
        background-color: #fff;
        color: rgb(26, 86, 197);
      }
    }
    .l_container {
      flex: 3;
      overflow-x: auto;
    }
  }
}
</style>
